window.onload = () => {
    let multiple = 5; // 设置放大倍数
    let con = document.querySelector('.container');
    let box = document.querySelector('.box');
    // 根据原始图片大小按比例设置需放大区域
    box.style['height'] = con.clientHeight / multiple + 'px';
    box.style['width'] = con.clientWidth / multiple + 'px';
    
    let show = document.querySelector('.show');
    let showImg = document.querySelector('.show>img');
    // 根据显示区域大小按比例设置放大后的图片大小
    showImg.style['width'] = show.clientWidth * multiple + 'px';
    showImg.style['height'] = show.clientHeight * multiple + 'px';

    con.addEventListener('mousemove', function (e) {
        let X = e.offsetX;
        let Y = e.offsetY;
        box.style['left'] = X + 'px';
        box.style['top'] = Y + 'px';
        box.style['transform'] = 'translate(-50%, -50%)';
        box.style['display'] = 'block';
        con.style['overflow'] = 'visible';

        showImg.style['left'] = - (X - box.clientWidth / 2) * show.clientWidth/con.clientWidth * multiple + 'px';
        showImg.style['top'] = - (Y - box.clientHeight / 2) * show.clientHeight/con.clientHeight * multiple + 'px';
    });
    con.onmouseleave = () => {
        box.style['display'] = 'none';
        con.style['overflow'] = 'hidden';
    }
}